<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>支付信息</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
      >操作按钮</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        height="500px"
        border
        style="width: 100%"
        :row-class-name="rowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-card class="box-card" shadow="hover" style="margin: 10px 20px">
              <div slot="header" class="clearfix">
                <span>支付内容</span>
              </div>
              <el-table :data="props.row.payInfo" stripe style="width: 100%">
                <el-table-column prop="medicineName" label="项目" width="180" />
                <el-table-column prop="unitPrice" label="单价" width="180" />
                <el-table-column prop="count" label="数量" />
                <el-table-column prop="total" label="总计" />
              </el-table>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="registerId" label="挂号单号" width="140" />
        <el-table-column prop="selfName" label="本人姓名" width="100" />
        <el-table-column prop="selfId" label="本人ID" width="100" />
        <el-table-column prop="doctorName" label="医生姓名" width="100" />
        <el-table-column prop="doctorId" label="医生ID" width="100" />
        <el-table-column prop="registerDate" label="挂号时间" width="200" />
        <el-table-column prop="payCost" label="待支付金额/元" width="150" />
        <el-table-column prop="isPay" label="缴费状态" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isPay"
              type="danger"
              size="mini"
              @click="pay(scope.row)"
            >待支付
            </el-button>
            <el-tag
              v-if="scope.row.isPay"
              type="success"
              effect="dark"
              size="medium"
            >已支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="report" label="报告单" width="100">
          <el-button
            type="warning"
            icon="el-icon-document"
            circle
          >查看</el-button>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
<script>
import { getPayInfo, setPayInfo } from '@/api/payInfo'
export default {
  name: 'Pay',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getPayInfo()
  },
  methods: {
    // log() {
    //   console.log(ispay)
    // },
    async pay(row) {
      console.log(row)
      await setPayInfo({ ...row })
      this.getPayInfo()
    },
    async getPayInfo() {
      // 获取支付记录
      const {
        data: { message }
      } = await getPayInfo()
      // console.log(message)
      this.tableData = message
      this.tableData.forEach((item) => {
        item.registerDate = item.registerDate.slice(0, 10)
        // console.log(item.payInfo.split(/,|\*/))
        item.payInfo = JSON.parse(item.payInfo)
      })
      console.log(this.tableData)
    },
    rowClassName(row, rowIndex) {
      // 添加插槽，使用插槽对应的对象的属性获取el-table的prop数组，
      // 这样可以实现包括动态绑定class或者根据属性的值获取对应的按钮显示对应的状态等操作
      row.id = rowIndex + 1
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}
</style>
